<template>
  <div class="shjz-xq-warp">
    <div style="margin-bottom: 40px;">
      <img :src="`http://localhost:9763${projectData.image}`"
           style="border-radius: 10px; width: 100%; height: 400px">
    </div>

    <p class="title">{{ projectData.title }}</p>

    <div class="jyxx">
      <span>帮扶对象：{{ projectData.targets }}</span>
      <span>项目备案编号： {{ projectData.code }}</span>
      <span>起止时间：{{ projectData.beginTime }} - {{ projectData.endTime }}</span>
    </div>

    <div style="padding: 20px;">
      <a-progress :stroke-color="{ '0%': '#108ee9', '100%': '#87d068'}" :percent="rate" :size="[300, 30]"/>
      <div class="bfje">
        <div class="xx-item">
          <span>目标金额</span>
          <div>{{ projectData.targetAmount }}元</div>
        </div>
        <div class="xx-item">
          <span>已募集</span>
          <div>{{ projectData.currentAmount }}元</div>
        </div>
        <div class="xx-item">
          <span>支持次数</span>
          <div>{{ projectData.frequency }}次</div>
        </div>

        <a-button type="primary" size="large" @click="showModal" v-if="projectStatus() == '我要支持'">
          <template #icon>
            <ShoppingCartOutlined/>
          </template>
          我要支持
        </a-button>

        <a-button type="primary" size="large" v-if="projectStatus() == '募捐已完成'">
          <template #icon>
            <SafetyCertificateOutlined/>
          </template>
          募捐已完成
        </a-button>

        <a-button type="primary" size="large" v-if="projectStatus() == '募捐未开始'">
          <template #icon>
            <ExclamationCircleOutlined/>
          </template>
          募捐未开始
        </a-button>

        <a-button type="primary" danger size="large" v-if="projectStatus() == '募捐已结束'">
          <template #icon>
            <ExclamationCircleOutlined/>
          </template>
          募捐已结束
        </a-button>
      </div>
    </div>

    <div>
      <a-tabs v-model:activeKey="activeKey" type="card">
        <a-tab-pane key="1" tab="项目介绍">
          <div v-html="projectData.content" class="aaaaa"></div>
        </a-tab-pane>
        <a-tab-pane key="2" tab="支持动态">
          <a-list item-layout="horizontal" :data-source="recordList" style="text-align: left;">
            <template #renderItem="{ item }">
              <a-list-item>
                <a-list-item-meta >
                  <template #description>
                    于<label style="margin: 0 10px; color: black; font-weight: bold">{{item.donationTime}}</label>支持<label style="margin: 0 10px; color: red; font-weight: bold">{{item.donationMoney}}</label>元
                  </template>
                  <template #title>

                    <div style="display: flex; justify-content: space-between">
                      {{ item.memberNickname }}
<!--                      <p style="margin-right: 50px">{{ item.memberNickname }} </p>-->
<!--                      <p>项目名称： {{ projectData.title }}</p>-->
<!--                      <p>备案编号： {{ projectData.code }}</p>-->
                    </div>
                  </template>
                  <template #avatar>
                    <UserOutlined style="font-size: 42px;"/>
                  </template>
                </a-list-item-meta>
              </a-list-item>
            </template>
          </a-list>
        </a-tab-pane>

      </a-tabs>
    </div>
  </div>


  <a-modal v-model:open="open" title="我要支持"
           :width="800" :footer="null" :maskClosable="false">
    <a-form :model="formState" :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-form-item label="选择支持金额">
        <a-radio-group v-model:value="formState.type" button-style="solid"
                       @change="formState.donationMoney = formState.type">
          <a-radio-button :value="10">￥10</a-radio-button>
          <a-radio-button :value="20">￥20</a-radio-button>
          <a-radio-button :value="50">￥50</a-radio-button>
          <a-radio-button :value="100">￥100</a-radio-button>
          <a-radio-button :value="0">自定义</a-radio-button>
        </a-radio-group>
      </a-form-item>

      <a-form-item label="自定义金额" v-show="formState.type == 0">
        <a-input-number v-model:value="formState.donationMoney" prefix="￥" style="width: 200px"/>
      </a-form-item>

      <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
        <a-button type="primary" @click="onSubmit">确认支持</a-button>
        <a-button style="margin-left: 10px" @click="open = false">取消支持</a-button>
      </a-form-item>
    </a-form>

  </a-modal>
</template>

<script setup>
import {onMounted, reactive, ref} from 'vue'
import {ExclamationCircleOutlined, SafetyCertificateOutlined, ShoppingCartOutlined, UserOutlined} from '@ant-design/icons-vue';
import {useRoute} from "vue-router";
import axios from "axios";
import {message} from "ant-design-vue";
import {tansParams} from '@/utils/index'
import moment from 'moment'

const userInfo = JSON.parse(localStorage.getItem("userInfo"))
const route = useRoute()
const labelCol = {
  style: {
    width: '150px',
  },
};
const wrapperCol = {
  span: 14,
};

const activeKey = ref('2');
const formState = reactive({
  type: 10,
  donationMoney: 10,
});
const onSubmit = async () => {
  const params = {
    projectName: projectData.value.title,
    projectId: projectData.value.id,
    memberId: userInfo.id,
    memberNickname: userInfo.nickname,
    donationMoney: formState.donationMoney,
    donationTime: moment().format('YYYY-MM-DD HH:mm:ss'),
  }
  const {data} = await axios.post('http://localhost:9763/system/record', params)
  if (data.code == 200) {
    message.success('支持成功!');
    init()
    open.value = false;
  } else {
    message.error('支持失败!');
  }
};


const recordList = ref([])
const getRecordList = async () => {

  const params = {
    // memberId: userInfo.id,
    projectId: projectData.value.id
  }

  let url = 'http://localhost:9763/system/record/list?' + tansParams(params)
  url = url.slice(0, -1)
  const {data} = await axios.get(url)
  recordList.value = data.rows
}


const open = ref(false);
const showModal = () => {
  open.value = true;
};


const projectData = ref({})
const rate = ref('')
const getData = async (id) => {
  const {data} = await axios.get('http://localhost:9763/system/project/' + id)
  projectData.value = data.data
  console.log(data.data, '----------------------data')
  // targetAmount   currentAmount
  let {targetAmount, currentAmount} = data.data
  rate.value = ((currentAmount / targetAmount) * 100).toFixed(2)
}

// 项目状态
const projectStatus = () => {
  let cur = new Date().getTime()
  const begin = new Date(projectData.value.beginTime).getTime()
  const end = new Date(projectData.value.endTime).getTime()
  if (cur < begin) {
    return '募捐未开始'
  }
  if (cur > end) {
    return '募捐已结束'
  }
  if (rate.value >= 100) {
    return '募捐已完成'
  }

  return '我要支持'
}


const id = ref('')
const init = async () => {
  await getData(id.value)
  await getRecordList()
}

onMounted(() => {
  if (route.query.id) {
    id.value = route.query.id
    init()
  }
})

</script>

<style scoped lang="scss">
:deep(img) {
  vertical-align: middle;
  border-style: none;
  width: 100%;
}

.shjz-xq-warp {
  padding: 20px;
  font-size: 14px;
  width: 1200px;

  .title {
    font-size: 24px;
    font-weight: bold;
    text-align: center;
  }

  .jyxx {
    padding: 10px;
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    width: 80%;
    margin: 0 auto;
    margin-bottom: 20px;
  }

  .bfje {
    text-align: center;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .xx-item {
      width: 200px;
      padding: 8px;
      background-color: #218d33;
      color: #e7e7e7;
      border-radius: 8px;
    }
  }

}


</style>
